<!-- 我的收藏 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="我的收藏" :borderBottom="false"></u-navbar>
		<go-top :scrollTop="scrollTop"></go-top>
		<view class="top flex_bet_align">
			<view>我的全部收藏</view>
			<view class="flex" v-if="compile">
				<view class="btn" @click="allcollec">清空</view>
				<view class="btn" @click="compile=!compile">完成</view>
			</view>
			<view class="btn" v-else @click="compile=!compile">管理</view>
		</view>
		<view class="card flex_align" v-for="(item,index) in list">
			<view @click="chick(index)" v-if="compile" class="iconfont" :class="item.opt?'icon-xuanzhong':'icon-xuanzhongyuandian'"></view>
			<view class="goodsImg">
				<image @click="goshopping(item.goods_id)" :src="item.image"></image>
			</view>
			<view class="details" @click="goshopping(item.goods_id)">
				<view class="flex_align icon">
					<image class="img" :src="item.mimage" v-if="item.mimage"></image>
					<view class="xin"><text>信</text>{{item.credit_value}}</view>
					<view class="shi" v-if="item.realname">实</view>
					<view class="qi" v-if="item.enterprise==1">企</view>
				</view>
				<view class="goodsName">{{item.title}}</view>
				<view class="flex">
					<view class="price">￥{{item.money}}/{{item.unit}}</view>
					<view class="watchNum">{{item.view}}人查看</view>
				</view>
				<view class="site">{{item.city}}</view>
			</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wshoucang.png" mode="widthFix"></image>
			<view class="text">暂无收藏</view>
		</view>
		<view style="height:100rpx;"></view>
		<view class="foot flex_bet_align" v-if="compile">
			<view class="flex_align" @click="allcheckbox">
				<view class="iconfont" :class="allcheck?'icon-xuanzhong':'icon-xuanzhongyuandian'"></view>
				<view>全选</view>
			</view>
			<view class="btn" @click="remcollec">取消收藏</view>
		</view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				list: [],
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
				// 编辑
				compile:false,
				// 是否全选
				allcheck:false,
			}
		},
		onLoad() {
			_this = this
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData('getcollection', {}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			// 跳转
			goshopping(id){
				uni.navigateTo({
					url:'/home/index/supplydetail?id='+id
				})
			},
			// 选中
			chick(index){
				_this.list[index].opt=!_this.list[index].opt
				_this.$forceUpdate()
			},
			// 全选
			allcheckbox(){
				_this.allcheck=!_this.allcheck
				_this.list.forEach(item=>{
					item.opt=_this.allcheck
				})
			},
			// 取消收藏
			remcollec(){
				let ids=[]
				_this.list.forEach(item=>{
					if(item.opt){
						ids.push(item.id)
					}
				})
				if(ids.length<1){
					uni.showToast({
						title:"请选择删除的商品",
						icon:"none"
					})
				}else{
					_this.$api.get("batchcancel", {ids:ids.toString()}).then(data => {
						uni.showToast({
							title:"删除成功"
						})
						$paginator = new _this.$paginator(_this.$api)
						_this.getdata(true)
					});
				}
			},
			// 清空收藏
			allcollec(){
				let ids=[]
				_this.list.forEach(item=>{
					ids.push(item.id)
				})
				if(ids.length<1){
					uni.showToast({
						title:"暂无收藏",
						icon:"none"
					})
				}else{
					_this.$api.get("batchcancel", {ids:ids.toString()}).then(data => {
						uni.showToast({
							title:"清空成功"
						})
						$paginator = new _this.$paginator(_this.$api)
						_this.getdata(true)
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top{
		width: 750rpx;
		height: 62rpx;
		background: #eeeeee;
		padding:19rpx 47rpx 17rpx 51rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #999999;
		.btn{
			margin-left: 37rpx;
			color:#333333;
		}
	}
	.card{
		margin-top:30rpx;
		padding:0 36rpx;
		.goodsImg{
			width: 180rpx;
			height: 180rpx;
			border-radius: 16rpx;
			background-color: #EEEEEE;
			margin:0 28rpx 0 0rpx;
			flex: 1;
			image{
				border-radius: 16rpx;
				width: 180rpx;
				height: 180rpx;
			}
		}
		.iconfont{
			line-height: 180rpx;
			color: #38be8c;
			font-size: 36rpx;
			margin-right: 23rpx;
		}
		.icon{
			font-size: 20rpx;
			.img{
				width: 90rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			.xin{
				font-size: 20rpx;
				height: 28rpx;
				line-height: 26rpx;
				padding-right:3rpx;
				box-sizing: border-box;
				border: 1rpx solid #00C676;
				color:#00C676;
				text{
					width:30rpx;
					display: inline-block;
					background:#00C676;
					color:#FFFFFF;
				}
			}
			.shi{
				width: 28rpx;
				height: 28rpx;
				color:#FFFFFF;
				font-size: 20rpx;
				line-height: 26rpx;
				background-color: #FFA909;
				margin:0 8rpx;
			}
			.qi{
				width: 28rpx;
				height: 28rpx;
				color:#FFFFFF;
				font-size: 20rpx;
				line-height: 26rpx;
				background-color: #08BAFF;
			}
		}
		
		.details{
			width: 100%;
			display: inline-block;
		}
		.goodsName{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #222222;
			line-height: 34rpx;
			margin:16rpx 0 24rpx;
			height: 34rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
		.price{
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #f73f3f;
			line-height: 34rpx;
		}
		.watchNum{
			font-size: 22rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #999999;
			line-height: 34rpx;
			margin-left: 20rpx;
		}
		.site{
			font-size: 22rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #999999;
			line-height: 34rpx;
			margin-top:18rpx;
		}
	}
	.time{
		font-size: 46rpx;
		font-weight: 500;
		color: #333333;
		margin: 50rpx 16rpx 40rpx 50rpx;
		.line{
			width: 390rpx;
			height: 2rpx;
			background-color: #EEEEEE;
			margin-left:16rpx;
		}
	}
	.foot{
		position: fixed;
		bottom: 0;
		left:0;
		background: #FFFFFF;
		width: 750rpx;
		height: 86rpx;
		padding:10rpx 41rpx 10rpx 53rpx;
		box-shadow: 0rpx 10rpx 15rpx #888888;
		.iconfont{
			margin-right: 14rpx;
			color: #38be8c;
			font-size: 36rpx;
		}
		.btn{
			width: 156rpx;
			height: 65rpx;
			background: #38be8c;
			border-radius: 33rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			line-height: 66rpx;
			text-align: center;
			color: #ffffff;
		}
	}
</style>
